<template>
  <div>
    <yt-crud
      v-bind="options"
      ref="crudRef"
      @onLoad="getData"
      :search-props="{
        showKeyword: true,
        keywordPlaceholder: t('business.park.placeholder.keyword'),
        keywordWidth: 300,
      }"
      :fun-props="{
        exportBtn: false,
        delBtn: false,
        addBtn: false,
      }"
      :table-props="{
        selection: false,
        delBtn: false,
        viewBtn: true,
        editBtn: false,
        menuSlot: true,
        menuWidth: 180,
        index: false,
      }"
      :loading="state.loading"
      :total="state.total"
      v-model:page="state.page"
      v-model:query="state.query"
      @openBeforeFun="openBeforeFun"
      @exportFun="handleExport"
    >
      <template #rightToolbar> </template>
      <template #menuSlot></template>
      <!--搜索插槽-->
      <template #createTimeSearch="scope:any">
        <el-date-picker
          format="YYYY-MM-DD"
          v-model="scope.row.createTime"
          type="daterange"
          :start-placeholder="t('crud.table.column.startTime')"
          :end-placeholder="t('crud.table.column.endTime')"
          :shortcuts="shortcuts"
        />
      </template>
      <template #keywordSearch="scope:any">
        <el-input v-model="scope.row.keyword" style="width: 310px" :placeholder="t('business.park.placeholder.keyword')" />
      </template>

      <template #state="scope:any">
        <DictTag :options="ParkStateEnum" :value="scope.row.state" />
      </template>
    </yt-crud>
    <Settlement ref="settlementRef" @success="handleSuccess" />
    <Debit ref="debitRef" @success="handleSuccess" />
    <SettleList ref="settleListRef" />
  </div>
</template>

<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'
import {parkList, Api } from '@/api/business/park'
import YtCrud from '@/components/common/yt-crud.vue'
import {useI18n} from 'vue-i18n'
import {ComponentInternalInstance} from 'vue'
import Settlement from './modules/settlement.vue'
import SettleList from './modules/settle.vue'
import Debit from './modules/debit.vue'

import {toDay, weekDay} from '@/utils'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { ParkStateEnum } = toRefs<any>(proxy?.useEnum('park_state_enum'))

const { t } = useI18n()

const settlementRef = ref()
const settleListRef = ref()
const debitRef = ref()

const state = reactive({
  page: {
    pageSize: 30,
    pageNum: 1,
  },
  total: 0,
  loading: false,
  query: {},
})

const shortcuts = [
  {
    text: t('crud.table.search.today'),
    value: () => {
      return toDay()
    },
  },
  {
    text: t('crud.table.search.last7day'),
    value: () => {
      return weekDay(7)
    },
  },
  {
    text: t('crud.table.search.last30day'),
    value: () => {
      return weekDay(30)
    },
  },

]

// 字典
const column = ref<IColumn[]>([
  {
    label: t('business.park.tranId'),
    key: 'tranId',
    align: 'center',
    search: false,
    sortable: true,
    formHide: false,
    colSpan: 22,
  },
  {
    label: t('business.park.stationName'),
    key: 'stationName',
    type: 'i18nString',
    align: 'center',
    search: false,
    formHide: false,
    slot: false,
  },
  {
    label: t('business.park.parkingName'),
    key: 'parkingName',
    type: 'i18nString',
    align: 'center',
    search: false,
    formHide: false,
    slot: false,
  },
  {
    label: t('business.park.carPlate'),
    key: 'carPlate',
    align: 'center',
    search: false,
    formHide: false,
    slot: false,
  },
  {
    label: t('business.park.inTime'),
    key: 'inTime',
    align: 'center',
    search: false,
    type: 'date',
    formHide: false,
    slot: false,
  },
  {
    label: t('business.park.occupyMinute'),
    key: 'occupyMinute',
    align: 'center',
    search: false,
    formHide: false,
    slot: false,
  },
  {
    label: t('business.park.outTime'),
    key: 'outTime',
    align: 'center',
    search: false,
    type: 'date',
    formHide: false,
    slot: false,
  },
  {
    label: t('business.park.state'),
    key: 'state',
    align: 'center',
    type: 'select',
    componentProps: {
      options: ParkStateEnum,
      style: {
        width: '120px'
      }
    },
    sortable: true,
    search: true,
    formHide: false,
    slot: true,
  },
  {
    label: t('crud.table.column.createTime'),
    key: 'createTime',
    tableWidth: 180,
    sortable: true,
    type: 'date',
    search: true,
    formHide: false,
    searchSlot: true
  },
  {
    label: t('crud.table.column.note'),
    key: 'note',
    hide: true,
    formHide: false,
    colSpan: 22,
    componentProps: {
      type: 'textarea',
      rows: 2,
    }
  },
])
const crudRef = ref()
const data = ref<any[]>([])
const getData = () => {
  state.loading = true
  parkList({
    ...state.page,
    ...state.query,
  })
    .then((res) => {
      data.value = res.data.rows
      state.total = res.data.total
    })
    .finally(() => {
      state.loading = false
    })
}

// 弹窗前置操作
const openBeforeFun = ({ type}) => {
  if (type === 'add') { /* empty */ } else if (type === 'update') { /* empty */ }
}

// 导出
const handleExport = () => {
  proxy?.download(Api.export, state.query, `order_${new Date().getTime()}.xlsx`)
}

const handleSuccess = ()=>{
  getData()
}

const options = reactive({
  ref: 'crudRef',
  data,
  column,
})
</script>

<style lang="scss" scoped></style>
